<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::common_header(~{::title},~{::link},~{})">
    <title>首页</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
</head>
<body>
<div th:replace="common/bar::topbar" style="height: 100%"></div>
<div class="container-fluid">
    <div class="row">
        <!--左边导航栏-->
        <div th:replace="common/bar::#sidebar"></div>
        <!--//中间卡片栏-->
        <div style="float: left" class="cardBodyDiv">
            <div class="card cardDiv " id="showCards">
            </div>

        </div>
        <!--//右边-->
        <div style="float: right">
            <div style="height: 100px;width: 100px"></div>
        </div>

    </div>
</div>
</body>
</html>

<script>
    //打开页面的时候执行
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: '/data/api/deviceSet',
            dataType: 'json',
            data: {},
            success: function (jsonData) {
                var str = '';
                var data = jsonData.data
                for (i = 0; i < data.length; i++) {
                    str = str + '<div class="card-body table-hover"  th:id="' + data[i].devId + '">';
                    if (data[i].nodeId == 1 || data[i].nodeId == 2) {
                        str +=
                            '<button style="float: left" type="button" class="btn btn-info" onclick="Devopen(' + data[i].devId + ')">开</button>' +
                            '<button style="float: left" type="button" class="btn btn-light" onclick="Devclose(' + data[i].devId + ')">关</button>';
                    }
                    if(data[i].nodeId == 6){
                        str +=
                            '<button style="float: left" type="button" class="btn btn-info" onclick="Devopen(' + data[i].devId + ')">开</button>';
                    }
                    str +=
                        '<span style="float: left;padding-left: 10px;padding-top: 10px"><a href="/device/' + data[i].devId + '">' + data[i].nodeName + '</a></span>' +
                        '<span style="float: right;color: darkgrey;font-size: small">' + data[i].devDesc + '</span></div>';
                }
                $("#showCards").append(str)
            },
            error: function () {
                alert("数据加载失败！");
            }
        })

    })
</script>

<script type="text/javascript">
    function Devopen(arr) {
        $.ajax({
            url: '/control/api/open',
            type: 'get',
            dataType: 'json',
            data: {
                devId: arr
            },
            success: function callbackFun(data) {
                alert(data.code + data.message)
                window.location.href = "/index"
            }
        });
    };

    function Devclose(arr) {
        $.ajax({
            url: '/control/api/close',
            type: 'get',
            dataType: 'json',
            data: {
                devId: arr
            },
            success: function callbackFun(data) {
                alert(data.code + data.message)
                window.location.href = "/index"
            }
        });
    }
</script>